<template>
  <div id="app">
     <el-input v-model="rulesId" placeholder="请输入商品编号" style="width:300px"></el-input>
      <el-button type="primary" @click="getGro" style="background-color:hotpink">查询</el-button>
      <el-button style="background-color:hotpink" icon="el-icon-circle-plus-outline" @click="preAddObject()">导入</el-button>
      <!-- 列表模态框 -->
  <el-table
        border
        :data="tableData"
        style="background:red,width: 100%"
        :row-class-name="tableRowClassName"
        :default-sort = "{prop: 'date', order: 'descending'}"
        @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="40"></el-table-column>
    <el-table-column prop="id" label="订单ID" width="100"></el-table-column>
    <el-table-column  prop="orderId" label="用户ID" width="130"> </el-table-column>
     <el-table-column prop="grouponId" label="参与人数" width="200"></el-table-column>
<el-table-column prop="shareUrl" label="分享图片" width="130">
   <template   slot-scope="scope">            
                    <img :src="scope.row.shareUrl"  min-width="70" height="70" />
                 </template>  
  </el-table-column>  
    <el-table-column prop="rulesId" label="团队折扣" width="130"></el-table-column>
    <el-table-column prop="userId"  label="团购要求" width="130"></el-table-column>
    <el-table-column prop="addTime" label="开始时间" width="180" value-format="yyyy-MM-dd HH:mm:ss"></el-table-column>
    <el-table-column prop="updateTime" label="结束时间" width="180"  value-format="yyyy-MM-dd HH:mm:ss" ></el-table-column>
  </el-table>
   <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" >
    </el-pagination>
  
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      tableData: [],
      currentPage4:1,
      pageSizes:[1, 2, 3, 4],
      pageSize:3,
      rulesId:'',
      title: "",
      total:400,
    }
  },
  methods:{
 // 列表页面
      getGro(){
        var $this = this;
            this.axios({
              method:'get',
              url: "http://localhost:8085/ecGroupon/getGroList",
              params:{pageNum:this.currentPage4,pageSize:this.pageSize,
               rulesId:this.rulesId}
            }).then(function(res){
                console.log(res);
                $this.tableData = res.data.obj.list;
                $this.total = res.data.obj.total;
              
            });
      }, 
        // 分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getGro();
      },
       handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage4 = val;
        this.getGro();
      },
    //全选
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log("点击复选框数据为:{}",this.multipleSelection);
      },
     
       tableRowClassName({row, rowIndex}) {
         if(rowIndex === 0){
          return 'three-row';
        }
        else if (rowIndex === 1) {
          return 'success-row';
        } else if (rowIndex === 2) {
          return 'warning-row';
        }
        
        else if (rowIndex == 3) {
          return 'four-row';
        }
      },
  },
  mounted(){
    this.getGro();
  }
}
</script>
<style>
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .three-row {
    background: rgb(250, 228, 232);
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-table .four-row {
    background: rgb(212, 226, 238);
  }
</style>

